<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单管理 - 铁路管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/admin/css/styles.css">
    <style>
        #app {
            display: flex;
            min-height: 100vh;
            width: 100%;
        }

        .status-active {
            color: #43a047;
            font-weight: 500;
        }

        .action-buttons {
            display: flex;
            gap: 5px;
        }

        .action-buttons .btn {
            flex: 1;
        }

        .disable-button {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
        }

        .status-inactive {
            color: darkslategray;
            font-weight: 500;
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal {
            background: white;
            border-radius: 8px;
            width: 90%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }

        .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-body {
            padding: 20px;
        }

        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #e0e0e0;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: #666;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
        }

        .close-btn:hover {
            background-color: #f5f5f5;
        }

        .required {
            color: #e53935;
        }

        .no-data {
            text-align: center;
            padding: 40px 0;
            color: #999;
        }

        .menu-tree {
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }

        .menu-tree ul {
            list-style: none;
            padding-left: 20px;
        }

        .menu-tree li {
            padding: 8px 0;
            cursor: pointer;
            position: relative;
        }

        .menu-tree li:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .menu-tree li.expanded > ul {
            display: block;
        }

        .menu-tree li > ul {
            display: none;
        }

        .menu-tree li::before {
            content: '▶';
            position: absolute;
            left: -15px;
            top: 8px;
            font-size: 10px;
            transition: transform 0.3s;
        }

        .menu-tree li.expanded::before {
            transform: rotate(90deg);
        }

        .icon-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
            max-height: 200px;
            overflow-y: auto;
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
        }

        .icon-option {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            cursor: pointer;
            font-size: 20px;
            transition: all 0.2s;
        }

        .icon-option:hover {
            border-color: #1976d2;
            background-color: #e3f2fd;
        }

        .icon-option.selected {
            border-color: #1976d2;
            background-color: #1976d2;
            color: white;
        }
    </style>
</head>
<body>

<div id="app">
    <!-- 主内容区 -->
    <div class="main-content">


        <!-- 页面内容区域 -->
        <div id="page-content" style="padding: 0 20px;">
            <!-- 搜索和添加区域 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h3 class="card-title">菜单查询</h3>
                </div>
                <div class="card-body">
                    <form class="form-row" @submit.prevent="search">
                        <div class="form-group col-3">
                            <label for="menuName">菜单名称</label>
                            <input type="text" v-model="searchForm.menuName" class="form-control"
                                   placeholder="请输入菜单名称">
                        </div>
                        <div class="form-group col-3">
                            <label for="menuUrl">菜单路径</label>
                            <input type="text" v-model="searchForm.menuUrl" class="form-control"
                                   placeholder="请输入菜单路径">
                        </div>
                        <div class="form-group col-3">
                            <label for="parentId">父菜单</label>
                            <select v-model="searchForm.parentId" class="form-control">
                                <option value="">全部</option>
                                <option value="0">顶级菜单</option>
                                <option v-for="menu in menuList" :key="menu.menuId" :value="menu.menuId"
                                        v-if="menu.parentId === 0">
                                    {{ menu.menuName }}
                                </option>
                            </select>
                        </div>
                        <div class="form-group col-3">
                            <label for="isShow">状态</label>
                            <select v-model="searchForm.isShow" class="form-control">
                                <option value="">全部</option>
                                <option value="1">启用</option>
                                <option value="0">停用</option>
                            </select>
                        </div>
                        <div class="form-group col-12" style="margin-top: 20px;">
                            <button type="submit" class="btn btn-primary" style="margin-right: 10px;">
                                <i class="fas fa-search"></i> 搜索
                            </button>
                            <button type="button" class="btn btn-success" @click="openModal('添加菜单')">
                                <i class="fas fa-plus"></i> 添加菜单
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 菜单列表 -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">菜单列表</h3>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <table>
                            <thead>
                            <!-- 添加CSS样式来平均分配表格列宽 -->
                            <style>
                                .menu-table {
                                    width: 100%;
                                    table-layout: fixed;
                                    border-collapse: collapse;
                                }

                                .menu-table th,
                                .menu-table td {
                                    padding: 12px 8px;
                                    text-align: center;
                                    border: 1px solid #ddd;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }

                                .menu-table th {
                                    background-color: #f8f9fa;
                                    font-weight: 600;
                                }

                                .menu-table tbody tr:hover {
                                    background-color: #f5f5f5;
                                }
                            </style>

                            <!-- 在table标签上添加menu-table类 -->
                            <table class="menu-table">
                                <thead>
                                <tr>
                                    <th>菜单ID</th>
                                    <th>菜单名称</th>
                                    <th>菜单路径</th>
                                    <th>菜单图标</th>
                                    <th>排序</th>
                                    <th>父菜单</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in paginatedData" :key="item.menuId">
                                    <td>{{ item.menuId }}</td>
                                    <td>{{ item.menuName }}</td>
                                    <td>{{ item.menuUrl || '一级菜单' }}</td>
                                    <td><i class="fas" :class="item.menuIcon"></i></td>
                                    <td>{{ item.menuOrder }}</td>
                                    <td>{{ item.parentId === 0 ? '顶级菜单' : (getParentMenuName(item.parentId)) }}</td>
                                    <td>
                                        <span v-if="item.isShow === 1" class="status-active">启用</span>
                                        <span v-else class="status-inactive">停用</span>
                                    </td>
                                    <td>{{ formatDateTime(item.createTime) }}</td>
                                    <td>
                                        <!-- 修改为垂直排列的flex容器 -->
                                        <div class="action-buttons"
                                             style="display: flex; flex-direction: column; gap: 5px;">
                                            <!-- 内层水平排列编辑和删除按钮 -->
                                            <div style="display: flex; gap: 5px;">
                                                <button class="btn btn-sm btn-primary" @click="handleEdit(item)"
                                                        style="flex: 1;">
                                                    <i class="fas fa-edit"></i> 编辑
                                                </button>
                                                <button class="btn btn-sm btn-danger" @click="handleDelete(item.menuId)"
                                                        style="flex: 1;">
                                                    <i class="fas fa-trash"></i> 删除
                                                </button>
                                            </div>
                                            <!-- 状态切换按钮放在下方 -->
                                            <button class="btn btn-sm"
                                                    :class="item.isShow === 1 ? 'btn-ban' : 'btn-success'"
                                                    @click="handleStatusChange(item.menuId, item.isShow)"
                                                    style="font-weight: 500;">
                                                <i class="fas" :class="item.isShow === 1 ? 'fa-pause' : 'fa-play'"></i>
                                                {{ item.isShow === 1 ? '停用' : '启用' }}
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <!-- 无数据提示 -->
                            <div v-if="tableData.length === 0" class="no-data">
                                <p>暂无数据</p>
                            </div>
                    </div>

                    <!-- 将原来的.page-controls替换为.pagination -->
                    <div class="pagination" v-if="totalItems > 0"
                         style="margin-top: 20px; display: flex; justify-content: center; align-items: center;">
                        <button class="btn btn-sm" :disabled="currentPage === 1" @click="prevPage">&laquo;</button>

                        <span class="page-info" style="margin: 0 10px;">
                            第 {{ startIndex + 1 }}-{{ endIndex }} 条，共 {{ totalItems }} 条
                        </span>

                        <div class="page-numbers" style="display: flex; margin: 0 10px;">
                            <button v-for="page in pages" :key="page"
                                    class="btn btn-sm"
                                    :class="{ 'btn-primary': page === currentPage }"
                                    @click="goToPage(page)">
                                {{ page }}
                            </button>
                        </div>

                        <button class="btn btn-sm" :disabled="currentPage === totalPages" @click="nextPage">&raquo;
                        </button>
                    </div>
                </div>
            </div>

            <!-- 菜单树结构 -->
            <div class="card mt-4">
                <div class="card-header">
                    <h3 class="card-title">菜单树结构</h3>
                </div>
                <div class="card-body">
                    <div class="menu-tree">
                        <ul>
                            <li v-for="menu in treeData" :key="menu.menuId" class="menu-item" @click="toggleMenu(menu)">
                                <i class="fas" :class="menu.menuIcon"></i> {{ menu.menuName }}
                                <ul v-if="menu.children && menu.children.length > 0">
                                    <li v-for="submenu in menu.children" :key="submenu.menuId">
                                        <i class="fas" :class="submenu.menuIcon"></i> {{ submenu.menuName }}
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑模态框 -->
    <div v-if="isModalVisible" class="modal-overlay" @click.self="closeModal">
        <div class="modal">
            <div class="modal-header">
                <h3>{{ currentModalTitle }}</h3>
                <button class="close-btn" @click="closeModal">&times;</button>
            </div>
            <div class="modal-body">
                <form class="form-row">
                    <div class="form-group col-12">
                        <label for="editMenuName">菜单名称 <span class="required">*</span></label>
                        <input type="text" class="form-control" id="editMenuName" v-model="formData.menuName"
                               placeholder="请输入菜单名称" required>
                    </div>
                    <div class="form-group col-12">
                        <label for="editMenuUrl">菜单路径 <span class="required">*</span></label>
                        <input type="text" class="form-control" id="editMenuUrl" v-model="formData.menuUrl"
                               placeholder="请输入菜单路径" required>
                    </div>
                    <div class="form-group col-12">
                        <label for="editParentId">父菜单</label>
                        <select class="form-control" id="editParentId" v-model="formData.parentId">
                            <option value="0">顶级菜单</option>
                            <option v-for="menu in menuList" :key="menu.menuId" :value="menu.menuId"
                                    v-if="menu.parentId === 0 && menu.menuId !== formData.menuId">
                                {{ menu.menuName }}
                            </option>
                        </select>
                    </div>
                    <div class="form-group col-6">
                        <label for="editSort">排序</label>
                        <input type="number" class="form-control" id="editSort" v-model="formData.sort"
                               placeholder="请输入排序号" min="1" value="1">
                    </div>
                    <div class="form-group col-6">
                        <label for="editStatus">状态</label>
                        <select class="form-control" id="editStatus" v-model="formData.status">
                            <option value="1">启用</option>
                            <option value="0">停用</option>
                        </select>
                    </div>
                    <div class="form-group col-12">
                        <label for="editIcon">菜单图标</label>
                        <div class="icon-selector">
                            <div v-for="icon in iconList" :key="icon" class="icon-option"
                                 :class="{ selected: formData.icon === icon }" @click="selectIcon(icon)">
                                <i class="fas" :class="icon"></i>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" @click="closeModal">取消</button>
                <button class="btn btn-primary" @click="saveData">保存</button>
            </div>
        </div>
    </div>
</div>
<script src="/admin/js/auth.js"></script>
<script src="/admin/js/jquery-3.6.0.js"></script>
<script src="/admin/js/vue.js"></script>
<script src="/admin/js/load-navbar.js"></script>
<script src="/admin/js/user-info.js"></script>
<script src="/admin/js/axios.js"></script>
<script src="/admin/js/config.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            searchForm: {
                menuName: '',
                menuUrl: '',
                parentId: '',
                isShow: ''
            },
            tableData: [],
            menuList: [],
            formData: {
                menuId: '',
                menuName: '',
                menuUrl: '',
                icon: 'fa-tachometer-alt',
                sort: 1,
                parentId: 0,
                status: 1,
                createTime: ''
            },
            isModalVisible: false,
            currentModalTitle: '',
            userName: '',
            // 分页相关数据
            currentPage: 1,
            pageSize: 8,
            totalItems: 0,
            useFrontendPagination: false,
            // 图标列表
            iconList: [
                // 基础管理类图标
                'fa-tachometer-alt', 'fa-cog', 'fa-users', 'fa-user-tag', 'fa-bars',
                'fa-list-ol', 'fa-tags', 'fa-chart-line', 'fa-chart-pie', 'fa-chart-bar',
                'fa-database', 'fa-server', 'fa-sitemap', 'fa-project-diagram',

                // 功能操作类图标
                'fa-plus-circle', 'fa-edit', 'fa-trash-alt', 'fa-save', 'fa-search',
                'fa-filter', 'fa-download', 'fa-upload', 'fa-print', 'fa-refresh',
                'fa-sync-alt', 'fa-undo', 'fa-redo',

                // 信息状态类图标
                'fa-bell', 'fa-info-circle', 'fa-question-circle', 'fa-exclamation-circle',
                'fa-check-circle', 'fa-times-circle', 'fa-warning', 'fa-calendar-alt',
                'fa-clock', 'fa-history',

                // 导航类图标
                'fa-home', 'fa-arrow-left', 'fa-arrow-right', 'fa-arrow-up', 'fa-arrow-down',
                'fa-chevron-left', 'fa-chevron-right', 'fa-chevron-up', 'fa-chevron-down',
                'fa-sign-in-alt', 'fa-sign-out-alt',

                // 内容展示类图标
                'fa-file-alt', 'fa-file-text', 'fa-file-code', 'fa-file-image', 'fa-file-pdf',
                'fa-book', 'fa-book-open', 'fa-clipboard', 'fa-list-ul', 'fa-list-check',

                // 铁路与交通业务相关图标
                'fa-train', 'fa-subway', 'fa-map-marker-alt', 'fa-car', 'fa-plane',
                'fa-ship', 'fa-bus', 'fa-taxi', 'fa-money-bill-wave', 'fa-credit-card',
                'fa-receipt', 'fa-shopping-cart', 'fa-ticket-alt',
                // 新增铁路系统专业图标
                'fa-route', 'fa-railway', 'fa-landmark', 'fa-gauge', 'fa-signal',
                'fa-road', 'fa-bridge', 'fa-tunnel', 'fa-gas-pump', 'fa-wifi',
                'fa-bolt', 'fa-charging-station', 'fa-tachometer', 'fa-clipboard-list',
                'fa-tasks', 'fa-network-wired', 'fa-train-subway', 'fa-industry',
                'fa-warehouse', 'fa-box', 'fa-shipping-fast', 'fa-route-sign',
                'fa-map-marked-alt', 'fa-traffic-light', 'fa-schedule'
            ]
        },
        computed: {
            // 计算总页数
            totalPages() {
                return Math.ceil(this.totalItems / this.pageSize);
            },
            // 当前页显示的数据
            paginatedData() {
                return this.tableData;
            },
            // 显示的页码范围
            pages() {
                const pages = [];
                const maxVisiblePages = 5; // 最多显示5个页码
                let startPage = Math.max(1, this.currentPage - Math.floor(maxVisiblePages / 2));
                let endPage = Math.min(this.totalPages, startPage + maxVisiblePages - 1);
                if (endPage - startPage < maxVisiblePages - 1) {
                    startPage = Math.max(1, endPage - maxVisiblePages + 1);
                }
                for (let i = startPage; i <= endPage; i++) {
                    pages.push(i);
                }
                return pages;
            },
            // 新增：开始索引
            startIndex() {
                return (this.currentPage - 1) * this.pageSize;
            },
            // 新增：结束索引
            endIndex() {
                return Math.min(this.startIndex + this.pageSize, this.totalItems);
            },
            // 菜单树数据
            treeData() {
                return this.buildMenuTree();
            }
        },
        methods: {
            search() {
                this.currentPage = 1; // 搜索时重置到第一页
                this.loadData();
            },
            openModal(title) {
                this.currentModalTitle = title;
                this.resetForm();
                this.isModalVisible = true;
            },
            closeModal() {
                this.isModalVisible = false;
                this.resetForm();
            },
            resetForm() {
                this.formData = {
                    menuId: '',
                    menuName: '',
                    menuUrl: '',
                    icon: 'fa-tachometer-alt',
                    sort: 1,
                    parentId: 0,
                    status: 1
                };
            },
            handleEdit(item) {
                // 检查menuIcon是否在iconList中，如果不在则使用默认值
                let iconValue = 'fa-tachometer-alt';
                if (item.menuIcon) {
                    // 优先尝试完全匹配
                    const exactMatch = this.iconList.find(icon => icon === item.menuIcon);
                    if (exactMatch) {
                        iconValue = exactMatch;
                    } else {
                        // 如果没有完全匹配，尝试模糊匹配（处理可能的前缀差异）
                        const partialMatch = this.iconList.find(icon => item.menuIcon.includes(icon));
                        if (partialMatch) {
                            iconValue = partialMatch;
                        }
                    }
                }

                this.formData = {
                    menuId: item.menuId,
                    menuName: item.menuName,
                    menuUrl: item.menuUrl,
                    icon: iconValue,
                    sort: item.menuOrder || 1,
                    parentId: item.parentId || 0,
                    status: item.isShow || 1,
                    createTime: item.createTime  // 修改为createTime，保持与后端一致
                };
                // 直接设置模态框标题和可见性，而不是调用openModal方法
                this.currentModalTitle = '编辑菜单';
                this.isModalVisible = true;
            },
            handleDelete(menuId) {
                if (confirm('确定要删除该菜单吗？删除后数据将无法恢复！')) {
                    axios.post('/admin/menu_manage/delete', {menuId})
                        .then(resp => {
                            if (resp.data.code === 200) {
                                alert('删除成功');
                                this.loadData(); // 重新加载数据
                            } else {
                                alert('删除失败: ' + resp.data.message);
                            }
                        })
                        .catch(error => {
                            console.error('删除请求失败:', error);
                            alert('删除失败，请重试');
                        });
                }
            },
            // 修改handleStatusChange方法
            handleStatusChange(menuId, status) {
                const newStatus = status === 1 ? 0 : 1;
                const action = newStatus === 1 ? '启用' : '停用';

                if (confirm(`确定要${action}该菜单吗？`)) {
                    axios.post('/admin/menu_manage/changeStatus', {menuId, isShow: newStatus})
                        .then(resp => {
                            if (resp.data.code === 200) {
                                alert('状态更新成功');
                                this.loadData(); // 重新加载当前页面数据
                                // 通知父页面刷新菜单（如果在iframe中）
                                if (window.parent && window.parent.loadMenu) {
                                    window.parent.loadMenu();
                                }
                            } else {
                                alert('状态更新失败: ' + resp.data.message);
                            }
                        })
                        .catch(error => {
                            console.error('状态更新请求失败:', error);
                            alert('状态更新失败，请重试');
                        });
                }
            },
            saveData() {
                // 表单验证
                if (!this.formData.menuName) {
                    alert('请输入菜单名称');
                    return;
                }
                if (!this.formData.menuUrl) {
                    alert('请输入菜单路径');
                    return;
                }

                const url = this.formData.menuId ? '/admin/menu_manage/update' : '/admin/menu_manage/add';
                // 修改这里，进行参数名映射转换
                const submitData = {
                    menuId: this.formData.menuId,
                    menuName: this.formData.menuName,
                    menuUrl: this.formData.menuUrl,
                    parentId: this.formData.parentId,
                    menuIcon: this.formData.icon,
                    menuOrder: this.formData.sort,
                    isShow: this.formData.status,
                    createTime: this.formData.createTime  // 修改为createTime，保持与后端一致
                };

                axios.post(url, submitData)
                    .then(resp => {
                        if (resp.data.code === 200) {
                            alert(this.formData.menuId ? '编辑成功' : '添加成功');
                            this.closeModal();
                            this.loadData(); // 重新加载数据
                        } else {
                            alert(this.formData.menuId ? '编辑失败: ' : '添加失败: ' + resp.data.message);
                        }
                    })
                    .catch(error => {
                        console.error('保存请求失败:', error);
                        alert('操作失败，请重试');
                    });
            },
            selectIcon(icon) {
                this.formData.icon = icon;
            },
            // 分页方法
            prevPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                    this.loadData();
                }
            },

            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                    this.loadData();
                }
            },

            goToPage(page) {
                this.currentPage = page;
                this.loadData();
            },

            loadData() {
                axios.get("/admin/menu_manage/getList", {
                    params: {
                        page: this.currentPage,
                        pageSize: this.pageSize,
                        menuName: this.searchForm.menuName || null,
                        menuUrl: this.searchForm.menuUrl || null,
                        parentId: this.searchForm.parentId === '' ? null : this.searchForm.parentId,
                        isShow: this.searchForm.isShow || null
                    }
                })
                    .then(resp => {
                        if (resp.data.code === 200) {
                            this.tableData = resp.data.data.list || [];
                            this.totalItems = resp.data.data.total || 0;

                            // 修复：只替换tableData，不重置menuList
                            // 这样可以保留之前加载的所有菜单信息
                            if (resp.data.data.list && resp.data.data.list.length > 0) {
                                // 总是合并新数据，不区分是否为搜索
                                const existingIds = new Set(this.menuList.map(menu => menu.menuId));
                                const newMenus = resp.data.data.list.filter(menu => !existingIds.has(menu.menuId));
                                this.menuList = [...this.menuList, ...newMenus];
                            }
                        } else {
                            alert("加载数据失败: " + resp.message);
                            this.tableData = [];
                            this.totalItems = 0;
                            // 注意：这里不重置menuList，以保留菜单信息
                        }
                    })
                    .catch(error => {
                        console.error('加载数据失败:', error);
                        alert('加载数据失败，请重试');
                    });
            },

            formatDateTime(dateTime) {
                if (!dateTime) return '';
                const date = new Date(dateTime);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },

            getParentMenuName(parentId) {
                const parentMenu = this.menuList.find(menu => menu.menuId === parentId);
                return parentMenu ? parentMenu.menuName : '';
            },

            // 构建菜单树
            buildMenuTree() {
                const menuMap = {0: []};
                const tree = [];

                // 首先将所有菜单按父ID分组
                this.menuList.forEach(menu => {
                    if (!menuMap[menu.parentId]) {
                        menuMap[menu.parentId] = [];
                    }
                    menuMap[menu.parentId].push(menu);
                });

                // 递归构建树结构
                function buildTree(menuId) {
                    const children = menuMap[menuId] || [];
                    if (children.length === 0) return [];

                    return children.map(child => ({
                        ...child,
                        children: buildTree(child.menuId)
                    }));
                }

                // 从顶级菜单开始构建
                return buildTree(0);
            },

            // 切换菜单展开/折叠
            toggleMenu(menu) {
                if (menu.children && menu.children.length > 0) {
                    const element = event.currentTarget;
                    $(element).toggleClass('expanded');
                    const submenu = $(element).find('ul').first();
                    submenu.slideToggle();
                }
            }
        },
        mounted() {
            // 加载菜单列表
            this.loadData();
            // 设置当前页面标识
            sessionStorage.setItem('currentPage', 'menu_manage.html');
        }
    });
</script>
</body>
</html>

<style>
    /* 状态样式 - 统一为启用绿色，停用红色 */
    .status-active {
        color: #28a745; /* 绿色 */
        font-weight: bold;
    }

    .status-inactive {
        color: #dc3545; /* 红色 */
        font-weight: bold;
    }

    /* 操作按钮样式 */
    .btn-success {
        background-color: #28a745; /* 启用 - 绿色 */
        color: white;
    }

    .btn-ban {
        background-color: #8B4513; /* 停用 - 棕色 */
        color: white;
    }

    /* 其他样式保持不变 */
</style>
